<template>
  <view v-if="show" class="popup-container" :style="appThemeStyle">
    <u-mask :show="true" :z-index="100" :duration="50" />
    <view class="popup-content">
      <view class="header">
        <view class="bg-image" :style="{ backgroundImage: `url('/static/signin/success.png')` }"></view>
        <view class="tips">
          <text>(当月已累计签到</text>
          <text class="value">{{ currentMonthDays }}</text>
          <text>天)</text>
        </view>
      </view>
      <!-- 奖励内容 -->
      <view class="swiper-wrap">
        <view class="swiper-item">
          <view class="item-title">今日获得</view>
          <view class="reward-wrap" :style="{ 'justify-content': 0 ? 'flex-start' : 'center' }">
            <view v-if="reward.points > 0" class="reward-item">
              <view class="item-icon">
                <image class="image" src="/static/signin/points.png"></image>
              </view>
              <view class="item-name oneline-hide">
                <text>积分</text>
                <text class="value">{{ reward.points }}</text>
              </view>
            </view>
            <view v-if="reward.money > 0" class="reward-item">
              <view class="item-icon">
                <image class="image" src="/static/signin/money.png"></image>
              </view>
              <view class="item-name oneline-hide">
                <text>金额</text>
                <text class="value">{{ reward.money }}</text>
                <text>元</text>
              </view>
            </view>
            <view v-if="reward.couponIds.length > 0" class="reward-item">
              <view class="item-icon">
                <image class="image" src="/static/signin/coupon.png"></image>
              </view>
              <view class="item-name oneline-hide">
                <text>优惠券</text>
                <text class="value">{{ reward.actualCouponNum }}</text>
                <text>张</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="btn-wrapper">
        <view class="btn-item btn-item-main" @click="onClose()">关闭</view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'SuccessPopup',
    emits: ['update:modelValue', 'close'],
    props: {
      // 控制组件显示隐藏
      modelValue: {
        Type: Boolean,
        default: false
      },
      // 当月累计签到天数
      currentMonthDays: {
        Type: Number,
        default: 0
      },
      // 签到成功后的奖励内容
      reward: {
        Type: Object,
        default: 0
      }
    },
    watch: {
      // 监听显示隐藏
      modelValue: {
        immediate: true,
        handler(val) {
          val ? this.onShowPopup() : this.show = false
        }
      },
    },
    data() {
      return {
        // 是否显示弹窗
        show: false
      }
    },
    methods: {

      // 显示弹窗
      onShowPopup() {
        this.show = true
      },

      // 关闭弹窗
      onClose() {
        this.$emit('update:modelValue', false)
        this.$emit('close')
      },

    }
  }
</script>

<style lang="scss" scoped>
  .popup-container {
    position: fixed;
    top: var(--window-top);
    left: var(--window-left);
    right: var(--window-right);
    bottom: var(--window-bottom);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
  }

  .popup-content {
    z-index: 100;
    width: 540rpx;
    font-size: 26rpx;
    border-radius: 28rpx;
    background: #fff;
  }

  // 头部背景图
  .header {
    position: relative;
    height: 180rpx;
    // background: linear-gradient(0deg, #ffffff, #ffd9a8);
    // border-radius: 28rpx 28rpx 0 0;

    .bg-image {
      position: absolute;
      left: 0;
      top: -114rpx;
      z-index: 110;
      width: 100%;
      height: 248rpx;
      background-size: 100% 100%;
    }

    .tips {
      position: absolute;
      left: 0;
      bottom: 0;
      z-index: 120;
      width: 100%;
      text-align: center;

      .value {
        color: $main-bg;
        margin: 0 6rpx;
      }
    }
  }

  // 奖励规则
  .swiper-wrap {
    margin: 40rpx auto 40rpx auto;
    display: flex;
    width: max-content;

    .swiper-item {
      position: relative;
      width: 430rpx;
      border-radius: 20rpx;
      margin-right: 40rpx;

      &:last-child {
        margin-right: 0 !important;
      }

      &.disabled {
        background: linear-gradient(10.74deg, hsla(0, 0%, 100%, .72) 9.8%, hsla(0, 0%, 100%, .88) 90.23%), #9e9e9e;
        border: 1rpx solid #e0e0e0;
        opacity: .6;
      }

      .item-title {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-size: 26rpx;
        color: #b04a15;

        &::after,
        &::before {
          content: "";
          display: inline-block;
          width: 130rpx;
          height: 1rpx;
        }

        &::before {
          background: linear-gradient(270deg, #ffd097, hsla(0, 0%, 100%, 0));
          margin-right: 20rpx;
        }

        &::after {
          background: linear-gradient(90deg, #ffcf95, hsla(0, 0%, 100%, 0));
          margin-left: 20rpx;
        }
      }
    }

    // 奖励内容
    .reward-wrap {
      margin-top: 30rpx;
      display: flex;
      flex-wrap: wrap;
      align-content: center;
      justify-content: center;
      gap: 40rpx 30rpx;

      .reward-item {
        text-align: center;
        min-width: 160rpx;

        &:only-child,
        &:nth-child(2n) {
          margin-right: 0;
        }

        &:nth-last-child(-n+2) {
          // margin-bottom: 0;
        }

        .item-icon {
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 auto 15rpx auto;

          .image {
            display: block;
            width: 60rpx;
            height: 60rpx;
          }
        }

        .item-name {
          .value {
            color: $main-bg;
            margin: 0 6rpx;
          }
        }
      }
    }
  }

  // 关闭按钮
  .btn-wrapper {
    padding: 40rpx 60rpx;

    .btn-item {
      flex: 1;
      font-size: 26rpx;
      height: 70rpx;
      color: #fff;
      border-radius: 50rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .btn-item-main {
      background: linear-gradient(to right, $main-bg, $main-bg2);
      color: $main-text;
    }
  }
</style>